<template>

<el-card class="box-card">
  <span style="color:#8df">夏帅帅1</span>
  <div slot="header" class="clearfix">
    <span style="color: pink;font-size: 12px;">说明：目前支持学科和关键字条件筛选</span>
 <el-button @click="$router.push('new')" style="float: right" icon="el-icon-edit" type="success">新增试题</el-button>

  </div>
  <div class="text item">
    <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
     <span style="margin-left: 35px">学科</span>
  <el-select @change="changesubject" v-model="from.subjectID" placeholder="请选择">
    <el-option
      v-for="item in subjectname"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
     <span>二级目录</span>
  <el-select v-model="from.catalogID" placeholder="请选择">
    <el-option
      v-for="item in twosubjectlist"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
     <span style="margin-left: 35px">标签</span>
  <el-select v-model="from.tags" placeholder="请选择">
    <el-option
      v-for="item in zhuangtai"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    <span style="margin-left: 20px">关键字</span>
  <el-input v-model="from.keyword" placeholder="请输入内容"></el-input>
    </div></el-col>
     <el-col :span="6"><div class="grid-content bg-purple">
     <span>试题类型</span>
  <el-select v-model="from.questionType" placeholder="请选择">
    <el-option
      v-for="item in questionType"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
     <span  style="margin-left: 35px">难度</span>
  <el-select v-model="from.difficulty" placeholder="请选择">
    <el-option
      v-for="item in questionType"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
     <span  style="margin-left: 35px">方向</span>
  <el-select v-model="from.direction" placeholder="请选择">
    <el-option
      v-for="item in direction"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    <span  style="margin-left: 20px">录入人</span>
  <el-select v-model="from.creatorID" placeholder="请选择">
    <el-option
      v-for="item in userlist"
      :key="item.id"
      :label="item.username"
      :value="item.username">
    </el-option>
  </el-select>
    </div>
    </el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
    <span >题目备注</span>
   <el-input v-model="from.remarks" placeholder="请输入内容"></el-input>
    </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
    <span>企业简称</span>
   <el-input v-model="from.shortName" placeholder="请输入内容"></el-input>
    </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
     <span  style="margin-left: 35px">城市</span>
  <el-select  style="width:39%" @change="onchangecitys"  v-model="from.province" placeholder="城市">
    <el-option
      v-for="item in provinces"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
   <el-select style="width:39%" v-model="from.city" placeholder="地区">
    <el-option
      v-for="item in citys"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
    </div></el-col>
 <el-col :span="6">
   <div style="margin-top:10px" class="grid-content bg-purple">
  <el-button type="primary" style="float: right;margin-left: 10px;" @click="onserch">搜索</el-button>
  <el-button style="float: right;" @click="onclearlist" >清除</el-button>
    </div></el-col>
</el-row>
  <el-tabs @tab-click="handleClick" v-model="activeName" type="card" >
    <el-tab-pane label="全部" name="first"></el-tab-pane>
    <el-tab-pane label="待审核" name="second"></el-tab-pane>
    <el-tab-pane label="已审核" name="third"></el-tab-pane>
    <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
  </el-tabs>
  <audit :countlength='countlength' @tochstate='tochstate' @topublishState='topublishState' @tochangelogin='tochangelogin' :tableData='options' @todelete='ondelete'/>
  <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[ 10,20,30,40]"
      :page-size="100"
      layout=" sizes, prev, pager, next, jumper"
      :total="counts">
    </el-pagination>
  <!-- 题目预览 -->
  <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="50%"
      @close='tochangeclose'
      >
      <div>
        <span style=" margin-right: 100px;">【题型】：{{clicklist.questionType|questionType}}</span>
        <span style=" margin-right: 100px;">【编号】：{{clicklist.id}}</span>
        <span style=" margin-right: 100px;">【难度】：{{clicklist.difficulty|updatedifficulty}}</span>
        <span style=" margin-right: 100px;">【标签】：{{clicklist.tags}}</span>
      </div>
       <div style="margin-top:20px;border-bottom: 1px solid #9a9a9a;padding-bottom: 20px;">
        <span style=" margin-right: 100px;">【学科】：{{clicklist.subject}}</span>
        <span style=" margin-right: 100px;">【目录】：{{clicklist.catalog}}</span>
        <span style=" margin-right: 100px;">【方向】：{{clicklist.direction}}</span>
      </div>
      <div style='padding-top: 20px;border-bottom: 1px solid #9a9a9a'>
        <p>【题干】:</p>
       <p style="color:#0000ff"> {{clicklist.question|html2Text}}</p>

       <div v-if="clicklist.questionType==='1'||clicklist.questionType==='2'">
         <p>
          {{clicklist.questionType|updataquestionType}} 选项：（以下选中的选项为正确答案）
       </p>
         <el-checkbox-group  v-model="checkList" >
            <el-checkbox style=" display: block;" v-for="item in questionlist.options" :key="item.id" :label="item.title"></el-checkbox>
          </el-checkbox-group>
       </div>
      </div>
      <div style='padding-top: 20px;border-bottom: 1px solid #9a9a9a'>
        【参考答案】:
        <el-button type="danger" @click="toshowvideo">视频答案预览</el-button>
        <div v-if="showVideo" class="video">
          <video :src="clicklist.videoURL" controls width="400" height="300"></video>
        </div>
      </div>
      <div style='padding-top: 20px;border-bottom: 1px solid #9a9a9a'>
        【答案解析】:{{clicklist.answer|html2Text}}
      </div>
      <div style='padding-top: 20px;border-bottom: 1px solid #9a9a9a'>
       【题目备注】:{{clicklist.remarks}}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 审核 -->
    <el-dialog
      title="题目审核"
      :visible.sync="showvisible"
      width="30%"
      >
          <el-radio v-model="auditfrom.chkState" label="1">通过</el-radio>
          <el-radio v-model="auditfrom.chkState" label="2">拒绝</el-radio>
      <el-input
        style="margin-top:20px"
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="auditfrom.chkRemarks">
      </el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="showvisible = false">取 消</el-button>
    <el-button  type="primary" @click="clickaudit">确 定</el-button>
  </span>
</el-dialog>
  </div>
</el-card>
</template>

<script>
import { choice, remove, detail, choicePublish, choiceCheck } from '../../api/hmmm/questions'
import { direction, questionType, difficulty } from '../../api/hmmm/constants'
import { provinces, citys } from '../../api/hmmm/citys'
import { list, simple } from '../../api/hmmm/subjects'
import { list as userlist } from '../../api/base/users'
import { simple as directoryssimple } from '../../api/hmmm/directorys'
import { simple as tagssimple } from '../../api/hmmm/tags'
import audit from '../components/audit.vue'
export default {
  components: {
    audit
  },
  data () {
    return {
      counts: null,
      currentPage4: 1,
      auditfrom: {
        chkRemarks: '',
        chkState: '1',
        id: ''
      },

      showvisible: false,
      checkList: [],
      dialogVisible: false,
      activeName: 'first',
      from: {
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null
      },
      options: [],
      direction,
      questionType,
      difficulty,
      provinces: [],
      citys: [],
      fromlist: [],
      tags: [
        {
          value: 1,
          tags: '启用'
        },
        {
          value: 0,
          tags: '禁用'
        }
      ],
      userlist: [],
      clicklist: [],
      questionlist: [],
      showVideo: false,
      publishState: null,
      chkState: '',
      subjectname: {},
      countlength: 0,
      twosubjectlist: [],
      zhuangtai: []
    }
  },

  created () {
    this.getlist()
    this.getcitys()
  },

  methods: {
    async getlist () {
      const res = await choice()
      console.log(res)
      this.countlength = res.data.counts
      this.counts = parseInt(res.data.counts)
      this.options = res.data.items
      console.log(this.options)
    },
    async getcitys () {
      const res = await provinces()
      this.provinces = res
      const res1 = await list()
      console.log(res1)
      this.fromlist = res1.data.items
      console.log(this.fromlist)
      const res2 = await userlist()
      console.log(res2)
      this.userlist = res2.data.list
      console.log(this.userlist)
      const res3 = await simple()
      this.subjectname = res3.data
      console.log(this.subjectname)
    },
    async onchangecitys () {
      const res = await citys(this.from.province)
      console.log(res)
      this.citys = res
      this.from.city = ''
    },
    onclearlist () {
      this.from = {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      }
      this.getlist()
    },

    async  ondelete (row) {
      await remove(row)
      console.log(row)
      this.getlist()
    },
    async tochangelogin (row) {
      this.dialogVisible = !this.dialogVisible
      this.clicklist = row
      console.log(row)
      console.log(this.clicklist)
      const res = await detail({ ...row, directoryName: '' })
      this.questionlist = res.data
      console.log(this.questionlist)
      res.data.options.forEach(item => {
        if (item.isRight === 1) {
          this.checkList.push(item.title)
        }
      })
      console.log(row)
      const res2 = await choicePublish(row)
      console.log(res2)
    },
    toshowvideo () {
      this.showVideo = !this.showVideo
    },
    tochangeclose () {
      this.showVideo = false
      console.log(123)
    },
    topublishState (row) {
      if (row.publishState === 1) {
        this.publishState = 0
      } else if (row.publishState === 0) {
        this.publishState = 1
      }
      console.log(this.publishState)
      this.$confirm(row.publishState === 1 ? '此操作将永久下架该文件, 是否继续?' : '此操作将永上架该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await choicePublish({ id: row.id, publishState: this.publishState })
          this.getlist()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async tochstate (row) {
      this.showvisible = true
      this.auditfrom.id = row.id
      console.log(row)
      await this.getlist()
    },
    async  clickaudit () {
      if (this.auditfrom.chkRemarks === '') {
        return this.$message.warning('请输入审核内容')
      }
      this.showvisible = false
      this.auditfrom.chkState = parseInt(this.auditfrom.chkState)
      await choiceCheck(this.auditfrom)
      this.getlist()
      this.auditfrom = {
        chkRemarks: '',
        chkState: '1',
        id: ''
      }
    },
    async handleClick (tab, event) {
      console.log(tab.label)
      if (tab.label === '待审核') {
        this.chkState = 0
      } else if (tab.label === '已拒绝') {
        this.chkState = 2
      } else if (tab.label === '已审核') {
        this.chkState = 1
      } else if (tab.label === '全部') {
        this.chkState = null
      }
      const res = await choice({ ...this.from, chkState: this.chkState })
      console.log(res)
      this.countlength = res.data.counts
      this.options = res.data.items
    },
    async onserch () {
      const res = await choice(this.from)
      console.log(res)
      this.countlength = res.data.counts
      this.options = res.data.items
      console.log(res.data)
      this.countlength = res.data.counts
      this.counts = res.data.counts
    },
    async handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      const res = await choice({ pagesize: val, ...this.from })
      console.log(res)
      this.options = res.data.items
    },
    async handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      const res = await choice({ page: val, ...this.from })
      console.log(res)
      this.options = res.data.items
    },
    async changesubject (val) {
      this.subjectID = val
      this.from.tags = null
      this.from.catalogID = null
      const res4 = await directoryssimple({ subjectID: val })
      this.twosubjectlist = res4.data
      const res = await tagssimple({ subjectID: val })
      console.log(this.twosubjectlist)
      this.zhuangtai = res.data
      console.log(res)
      console.log(val)
    }

  }
}
</script>

<style scoped lang='less'>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;

    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    // background: #d3dce6;

  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-select{
    width: 80%;
    margin-left: 10px;

  }
.grid-content{
margin-top: 10px;
}
.el-input {
  width: 80%;
   margin-left: 10px;
}
span{

}
.el-checkbox {
  pointer-events: none;
}
</style>
